<template>
  <section class="form-box">
    <h4 class="divider">入参信息</h4>
    <div class="request-table">
      <table class="pure-table">
        <thead>
          <tr>
            <th>参数名称<span class="required">*</span></th>
            <th>中文名称</th>
            <th>类型<span class="required">*</span></th>
            <th>默认值</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in requestData" :key="index">
            <td>
              <el-input
                v-model="item.paramName"
                placeholder="请输入"
              ></el-input>
            </td>
            <td>
              <el-input
                v-model="item.paramNameCn"
                placeholder="请输入"
              ></el-input>
            </td>
             <td>
              <!-- <el-input
                v-model="item.type"
                placeholder="请输入类型"
              ></el-input> -->
               <el-select v-model="item.type" placeholder="请选择">
              <el-option :value="item" v-for="(item,index) in typeList" :key="index">{{item}}</el-option>
            </el-select>
            </td>
            <td>
              <el-input
                v-model="item.defaultValue"
                placeholder="请输入"
              ></el-input>
            </td>
            <td><span class="del" @click="delRow(index)">删除</span></td>
          </tr>
          <tr>
            <td colspan="3">
              <el-button type="primary" @click="addRow">+增加参数</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="footer">
      <el-divider></el-divider>
      <el-button type="primary" @click="saveSubmit(1)" plain>上一步</el-button>
      <el-button type="primary" @click="saveSubmit(3)">下一步</el-button>
    </div>
  </section>
</template>

<script>
import { ElMessageBox, ElMessage } from "element-plus";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import RequestTable from "./RequestTable.vue";
import { reactive, ref, onMounted, defineComponent, watch } from "vue";
import {paramType} from "@/utils/index.js"
export default defineComponent({
  components: { RequestTable },
  emits: ["callEdit"],
  
  setup(props, ctx) {
    const typeList = ref(paramType)
    const route = useRoute();
    const store = useStore();
    const testResult = ref("");
    const requestData = ref([{ defaultValue: "" }]);
    // 删除
    const delRow = (index) => {
      requestData.value.splice(index, 1);
    };
    // 新增行
    const addRow = () => {
      requestData.value.push({ defaultValue: "" });
    };
    let editMode = route.name == "EditService";
    // 下一步上一步
    const saveSubmit = (setp) => {
      if (setp == 1) {
        ctx.emit("callEdit", 1);
      } else {
          requestData.value.map((item,index)=>{
              item.displayOrder = index
          })
          store.commit("app/PUT_SERVICE_2", requestData.value);
          // console.log("state：", store.state.app.serviceBody);
          ctx.emit("callEdit", 3);
      }
    };
    onMounted(() => {
      if (editMode) {
        requestData.value = store.state.app.serviceBody.inParamsList;
        // console.log("requestData.value", requestData.value);
      }
    });
    return {
      testResult,
      requestData,
      addRow,
      delRow,
      saveSubmit,
      typeList
    };
  },
});
</script>
